<template>
	<view class="update-agent">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<!--轮播图-->
		<template v-if="bannerList.length>0">
			<gyd-swiper :list="bannerList"></gyd-swiper>
		</template>

		<view class="updae-mode">
			<view class="hd">代理升级方式为以下三种,选择您想要的方式进行升级</view>
			<view class="bd">
				<view class="item">
					<view class="left">
						<view class="label">一、桶数爬坡</view>
						<view class="vaue">名下客户购买桶数达到等级标准自动升级</view>
					</view>
					<view class=""></view>
				</view>
				<view class="item">
					<view class="left">
						<view class="label">二、采购架子爬坡</view>
						<view class="vaue">购买架子数量达标自动升级,此方式需要在下方购买</view>
					</view>
					<view class="btn" @click="pageRoute('/lifePages/water-rack/water-rack')">去购买</view>
				</view>
				<view class="item">
					<view class="left">
						<view class="label">三、购买推客升级礼包</view>
						<view class="vaue">购买推客升级礼包自动升级，此方式需要在下方购买</view>
					</view>
					<view class="btn" @click="pageRoute('/lifePages/gift-pack/gift-pack')">去购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
		inject,
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '升级为代理',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		bannerList: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		getBanner();
	}

	function getBanner() {
		request.get('content/banner', {
			position_id: 14
		}).then(res => {
			console.log('轮播图', res);
			state.bannerList = res.data;
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		bannerList,
	} = toRefs(state);
</script>

<style lang="scss">
	.update-agent {
		.updae-mode {
			height: 440rpx;
			padding: $m24;
			margin: 0 $m24 $m24;
			background: linear-gradient(180deg, rgba(199, 224, 255, 0.5) 0%, rgba(199, 224, 255, 0.2) 77%, rgba(255, 255, 255, 0) 100%);
			background-size: 100% 100%;
			border-radius: 10rpx;

			.hd {
				font-size: 30rpx;
				color: #222a52;
				font-weight: 600;
			}

			.bd {
				.item {
					padding: 10rpx 0;
					margin: 0 0 20rpx 0;
					display: flex;
					align-items: center;

					.left {
						flex: 1;
						margin-right: 20rpx;

						.label {
							font-size: 30rpx;
							color: #222a52;
							font-weight: 700;
						}
					}

					.btn {
						width: 120rpx;
						height: 60rpx;
						background: linear-gradient(to right, #125cd7, #279dfa);
						border-radius: 34rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 26rpx;
						color: #fff;
					}
				}
			}
		}
	}
</style>